<template>
  <div class="container">
    <!-- 顶部搜索框模块 -->
    <div class="form-group">
      <div class="input-group">
        <h4>品牌管理</h4>
      </div>
    </div>

    <!-- 数据表格 -->
    <table class="table table-bordered table-hover mt-2">
      <thead>
        <tr>
          <th>编号</th>
          <th>资产名称</th>
          <th>价格</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>

          <!-- 如果价格超过100，就有red这个类 -->
          <td :class="item.price > 100 ? 'red' : ''">{{ item.price }}</td>
          <td>{{ item.time }}</td>
          <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        <tr style="background-color: #eee">
          <td>统计:</td>
          <td colspan="2">总价钱为: {{ total }}</td>
          <td colspan="2">平均价: {{ average }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr v-if="list.length === 0">
          <td colspan="5" style="text-align: center">暂无数据</td>
        </tr>
      </tfoot>
    </table>

    <!-- 添加资产 -->
    <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            placeholder="资产名称"
            v-model="name"
          />
        </div>
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <div class="form-group">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            placeholder="价格"
            v-model.number="price"
          />
        </div>
      </div>
      <!-- &nbsp;&nbsp;&nbsp;&nbsp; -->
      <!-- 阻止表单提交 -->
      <button class="btn btn-primary" @click.prevent="add">添加资产</button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '', // 名称
      price: '', // 价格
      result: 0,
      // list: [
      //   { id: 100, name: '外套', price: 199, time: new Date('2010-08-12') },
      //   { id: 101, name: '裤子', price: 34, time: new Date('2013-09-01') },
      //   { id: 102, name: '鞋', price: 25.4, time: new Date('2018-11-22') },
      //   { id: 103, name: '头发', price: 19900, time: new Date('2020-12-12') }
      // ]
      list: JSON.parse(localStorage.getItem('pinPai'))
    }
  },
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
      console.log(this.list)
      console.log(123)
    },
    add () {
      if (this.name === '' || this.price === '') return alert('数据不能为空')
      if (this.list.length === 0) {
        this.result = 1
      } else {
        // 遍历数组id值将其解构作为Math参数找到数组最大的id值+1
        this.result = Math.max(...this.list.map(item => item.id)) + 1
      }
      this.list.push({
        id: this.result,
        name: this.name,
        price: +this.price,
        time: new Date()
      })
      this.name = ''
      this.price = ''
    }
  },
  computed: {
    total () {
      if (this.list.length === 0) return
      return this.list.reduce((prev, item) => {
        console.log(item.price)
        return prev + item.price
      }, 0)
    },
    average () {
      if (this.list.length === 0) return
      return (this.total / this.list.length).toFixed(2)
    }
  },
  watch: {
    list (value) {
      localStorage.setItem('pinPai', JSON.stringify(value))
    }
  }
}
</script>

<style>
.red {
  color: red;
}
</style>
